import {useCallback, useRef, useState} from 'react';
import {GridThree} from '../../../components';
import {BindItem, BtnItem} from '../../../mobx/home';
import BtnListDom from './BtnListDom';
import {FeaturedRankList, VipRankList} from '../../../services';

interface ModelOneProps {
  Title: string;
  bindList: BindItem[];
  btnList: BtnItem[];
  navigation?: any;
  typeId?: number;
  tempType: number;
  scrollToTop?: any;
}

const ModelOne = (props: ModelOneProps) => {
  const {tempType, Title, bindList, navigation, typeId, scrollToTop, btnList} =
    props;
  const idxRef = useRef(2);
  const [list, setList] = useState([]);

  const changeData = useCallback(
    (type: number) => {
      let api = null;
      if (type === 5) {
        api = VipRankList;
      } else {
        api = FeaturedRankList;
      }
      if (api) {
        api({
          Type: typeId,
          PageIndex: idxRef.current,
          PageSize: bindList?.length,
        })
          .then((res: any) => {
            if (Array.isArray(res?.Data) && res?.Data?.length > 0) {
              idxRef.current += 1;
              setList(res.Data);
            } else {
              throw new Error('');
            }
          })
          .catch(() => {
            idxRef.current = 2;
          });
      }
    },
    [typeId, bindList?.length],
  );

  return (
    <>
      <GridThree
        list={list.length > 0 ? list : bindList}
        type={1}
        navigation={navigation}
      />
      <BtnListDom
        list={btnList}
        scrollToTop={scrollToTop}
        navigation={navigation}
        idx={typeId}
        Title={Title}
        changeData={changeData}
      />
    </>
  );
};

export default ModelOne;
